<template>
  <div class="achievement">
    <div class="achievement-header clearfix">
      <ul class="item fl">
        <li v-for="(item, index) in items"
            :key="index"
            @click="selectItem(item.code,item.type)">
          <span :class="[current == item.code ? 'cur' : '']">{{item.name}}</span>
        </li>
      </ul>
      <ul class="date fr"
          @click="showData">
        <li class="date_time" :class="info=='按条件查找'?'':'active'">
          <span>按条件查找</span>
          <i class="icon-right date-hide"></i>
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <div class="lists-nav">
        <div :class="sortType!=2?'cur':''" @click="clickSortType(1)">按订单量<i></i></div>
        <div :class="sortType==2?'cur':''" @click="clickSortType(2)">按交易额<i></i></div>
      </div>
      <!-- 按订单量排行 -->
      <div v-if="sortType==1">
        <ul class="lists" v-if="numLists.length>0">
          <li class="list-title">
            <span class="title title0">排名</span>
            <span class="title title1">微信昵称</span>
            <span class="title title2">会员ID</span>
            <span class="title title3">订单量(笔)</span>
          </li>
          <li class="list-con"
              v-for="(item,index) in numLists"
              :key="index">
            <span :class="getCls(index+1)">{{index+1}}</span>
            <span class="title title1">{{item.nickname}}</span>
            <span class="title title2">{{item.user_id}}</span>
            <span class="title title3">
              <b>{{item.order_count}}</b>
            </span>
          </li>
        </ul>
        <div v-else class="no-data">
          <no-data :noData="noData"></no-data>
        </div>
      </div>

      <!-- 按交易额排行 -->
      <div v-else>
        <ul class="lists" v-if="paymentLists.length>0">
          <li class="list-title">
            <span class="title title0">排名</span>
            <span class="title title1">微信昵称</span>
            <span class="title title2">会员ID</span>
            <span class="title title3">交易额(元)</span>
          </li>
          <li class="list-con"
              v-for="(item,index) in paymentLists"
              :key="index">
            <span :class="getCls(index+1)">{{index+1}}</span>
            <span class="title title1">{{item.nickname}}</span>
            <span class="title title2">{{item.user_id}}</span>
            <span class="title title3"><i>{{mSymbol.name}}</i>
              <b>{{item.total_payment}}</b>
            </span>
          </li>
        </ul>
        <div v-else class="no-data">
          <no-data :noData="noData"></no-data>
        </div>
      </div>
    </div>
    <date-pop @cancel="cancelTime"
              @confirm="selectTime"
              :current="current"
              :timeData="dateInfo"
              v-if="show_date"></date-pop>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { Popup } from 'vant'
import datePop from '@/views/user/components/datePop'
import { dhsTeamOrderSort } from '@/api/user/dhs/dhsApi'
import { mapGetters } from 'vuex'
// import noDataImg from '@img/user/no-order-rank.png'
import noData from '@/components/noData/index'
Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      noData: {
        text: '暂无排名',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-order-rank.png',
        marginTop: '60px',
        txtMarginTop: '-45px'
      },
      dateInfo: {
        year: {},
        quarter: {},
        month: {}
      },
      dhs_rank_name: null,
      total_commission: null,

      items: [
        {
          name: '月',
          code: 1,
          type: 'month'
        },
        {
          name: '季度',
          code: 2,
          type: 'quarter'
        },
        {
          name: '年',
          code: 0,
          type: 'year'
        }
      ],
      current: 1,
      type: 'month',
      sortType: 1,
      numLists: [],
      paymentLists: [],
      show_date: false,
      info: ''
    }
  },
  created() {
    this.getTime()
    this.init()
  },
  methods: {
    // 获取当前年份和月份
    getTime() {
      const time = new Date()
      const currentMonth = time.getMonth() + 1
      const currentYear = time.getFullYear()
      // 当前年月
      this.dateInfo.currentYear = currentYear
      this.dateInfo.currentMonth = currentMonth
      this.dateInfo.currentQuarter = Math.ceil(currentMonth / 3)
    },
    getCls(sort) {
      if (sort <= 3) {
        return `icon icon${sort}`
      } else {
        return 'text'
      }
    },
    init() {
      const value =
        this.current == 1
          ? this.dateInfo.currentMonth
          : this.current == 2
            ? this.dateInfo.currentQuarter
            : ''

      const data = {
        type: this.type,
        value,
        year: this.dateInfo.currentYear
      }

      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      dhsTeamOrderSort(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.dateInfo.currentYear = resData.year
          // this.dateInfo.currentMonth = resData.k || 1
          // this.dateInfo.currentQuarter = resData.k || 1
          this.dateInfo.year = resData.year_list
          this.dateInfo.month = resData.month
          this.dateInfo.quarter = resData.quarter

          this.numLists = resData.num_sort
          this.paymentLists = resData.payment_sort
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换按订单量排行或按交易额排行
    clickSortType(type) {
      this.sortType = type
    },
    selectItem(code, type) {
      this.cancelTime()
      this.current = code
      this.type = type
      this.init()
    },
    showData() {
      this.show_date = true
    },
    selectTime(e) {
      this.dateInfo.currentYear = e.selectYear
      this.dateInfo.currentMonth = e.selectMonth
      this.dateInfo.currentQuarter = e.selectQuarter
      this.show_date = false
      this.init()
    },
    cancelTime() {
      this.show_date = false
    }
  },
  components: {
    datePop,
    noData
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/mixin";
.achievement {
  // background-color: #f4f4f4;
  min-height: 700px;
  &-header {
    background-color: $default;
    padding: 20px 0;
    z-index: 9999;
    .item {
      display: flex;
      justify-content: space-between;
      // flex-wrap: wrap;
      width: 50%;
      margin-left: 30px;
      height: 56px;
      border: 1.5px solid $warning;
      border-radius: 28px;
      box-sizing: border-box;
      overflow: hidden;
      li {
        flex: 1;
        // height: 100%;
        text-align: center;
        border-right: 1px solid $warning;
        box-sizing: border-box;
        &:last-child {
          border-right: none;
        }
        span {
          display: inline-block;
          width: 100%;
          color: $warning;
          font-size: 22px;
          line-height: 56px;
          &.cur {
            border-right: 1px solid $warning;
            color: $default;
            background-color: $warning;
          }
        }
      }
    }
    .date {
      margin-right: 30px;
      display: inline-block;
      color: #666;
      span {
        line-height: 60px;
        font-size: 26px;
      }
      .date_time{
        &.active{
          // color:#F30C23;
        }
      }
      .date-hide {
        font-size:20px;
        vertical-align: 0;
        transform:translate(50%,-25%) rotateZ(45deg);
      }
      .date-show {
        line-height: 56px;
        span {
          color: $warning;
          font-size: 24px;
        }
      }
    }
  }
  .lists-nav{
    overflow:hidden;
    display:flex;
    margin-bottom:20px;
    border-radius: 0 0 20px 20px;
    div{
      position:relative;
      flex: auto;
      height: 100px;
      line-height: 100px;
      font-size: 26px;
      text-align: center;
      background-color: $default;
      &.cur{
        font-size: 28px;
        font-weight: bold;
        i{
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          height:5px;
          width: 54px;
          @include gradient(right,RGBA(242, 18, 40, 1),RGBA(242, 18, 40, .1));
        }        
      }
    }
  }
  .achievement-content {
    .lists {
      overflow:hidden;
      background: #fff;
      border-radius: 20px;
      margin: 0 25px;
      padding: 0 25px;
      li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        line-height: 120px;
        color: #333;
        box-sizing: border-box;
        border-bottom: 1px solid #EDEDED;
        span {
          flex: 1;
          font-size: 26px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333;
          &.text{
            text-indent:15px;
          }
          &.icon{
            width: 47px;
            height: 53px;
            line-height: 53px;
            font-weight: bold;
            text-align: center;
            float: left;
            text-indent: -999px;
            background-size: auto 100%;
            background-position: left center;
            background-repeat: no-repeat;
           &.icon1 {
              background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/No1.png");
            }
            &.icon2 {
              background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/No2.png");
            }
            &.icon3 {
              background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/No3.png");
            }
          }
          &.title2 {
            text-align: center;
          }
          &.title3 {
            text-align: right;
            padding-right: 15px;
          }
        }
        &.list-con{
          span{
            font-size: 28px;
            &.text{
              font-weight: bold;
            }
            &.title3 {
              font-weight: bold;
              color: #FD2049;
            }
          }
        }
        &:first-child {
          line-height: 95px;
        }
        &:last-child{
          border-bottom: 0;
        }
      }
    }
  }
  .explain {
    margin: 30px;
    .explain_click {
      color: #999;
      font-size: 24px;
    }
    .icon {
      display: inline-block;
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 28px;
      text-align: center;
      border: 2px solid $warning;
      color: $warning;
      font-weight: bold;
      border-radius: 50%;
      transform: scale(0.5, 0.5);
      margin-left: -16px;
    }
  }
}
.Glossary {
  margin-top: 30px;
  padding-left: 30px;
  li {
    padding: 24px 0;
    border-bottom: 1px solid #f4f4f4;
    box-sizing: border-box;
    p {
      width: 710px;
      line-height: 48px;
      color: #333;
      font-size: 28px;
      &:nth-child(2) {
        color: #999;
        font-size: 24px;
      }
    }
  }
}
.ok {
  background-color: $warning;
  text-align: center;
  margin: 30px;
  margin-top: 20px;
  border-radius: 42px;
  span {
    line-height: 84px;
    color: $default;
    font-size: 30px;
  }
}
</style>
